<template>
  <el-dialog
    v-model="visible"
    title="分享表情包"
    width="500px"
    :close-on-click-modal="false"
  >
    <div class="share-content">
      <div class="preview-image">
        <el-image 
          :src="imageUrl" 
          fit="contain"
          style="width: 200px; height: 200px"
        />
      </div>

      <div class="share-options">
        <h4>分享方式</h4>
        <div class="share-buttons">
          <el-button 
            type="primary" 
            @click="copyLink"
            :icon="Link"
          >
            复制链接
          </el-button>
          <el-button 
            type="success" 
            @click="downloadImage"
            :icon="Download"
          >
            下载图片
          </el-button>
          <el-button 
            type="warning" 
            @click="shareToWeChat"
            :icon="ChatDotRound"
          >
            分享到微信
          </el-button>
          <el-button 
            type="danger" 
            @click="shareToWeibo"
            :icon="Share"
          >
            分享到微博
          </el-button>
        </div>

        <el-divider>二维码分享</el-divider>
        <div class="qrcode-container" ref="qrcodeRef"></div>
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="visible = false">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Link, Download, ChatDotRound, Share } from '@element-plus/icons-vue'
import QRCode from 'qrcode'
import axios from 'axios'

const props = defineProps({
  modelValue: Boolean,
  imageUrl: String,
  imageId: String
})

const emit = defineEmits(['update:modelValue'])

const visible = ref(props.modelValue)
const qrcodeRef = ref(null)

watch(() => props.modelValue, (val) => {
  visible.value = val
})

watch(visible, (val) => {
  emit('update:modelValue', val)
  if (val && props.imageUrl) {
    generateQRCode()
  }
})

// 生成二维码
const generateQRCode = async () => {
  if (!qrcodeRef.value || !props.imageUrl) return
  
  try {
    const shareUrl = `${window.location.origin}/share/${props.imageId}`
    const qrcode = await QRCode.toCanvas(shareUrl, {
      width: 200,
      margin: 2,
      color: {
        dark: '#000000',
        light: '#ffffff'
      }
    })
    
    qrcodeRef.value.innerHTML = ''
    qrcodeRef.value.appendChild(qrcode)
  } catch (error) {
    console.error('生成二维码失败:', error)
  }
}

// 复制链接
const copyLink = () => {
  const shareUrl = `${window.location.origin}/share/${props.imageId}`
  navigator.clipboard.writeText(shareUrl)
    .then(() => ElMessage.success('链接已复制'))
    .catch(() => ElMessage.error('复制失败'))
}

// 下载图片
const downloadImage = async () => {
  try {
    const response = await axios.get(props.imageUrl, {
      responseType: 'blob'
    })
    const url = window.URL.createObjectURL(response.data)
    const link = document.createElement('a')
    link.href = url
    link.download = `emoji_${props.imageId}.png`
    link.click()
    window.URL.revokeObjectURL(url)
    ElMessage.success('下载成功')
  } catch (error) {
    ElMessage.error('下载失败')
  }
}

// 分享到微信
const shareToWeChat = () => {
  // 实现微信分享逻辑
  ElMessage.info('微信分享功能开发中...')
}

// 分享到微博
const shareToWeibo = () => {
  const shareUrl = encodeURIComponent(`${window.location.origin}/share/${props.imageId}`)
  const title = encodeURIComponent('我生成了一个有趣的表情包，快来看看吧！')
  window.open(`http://service.weibo.com/share/share.php?url=${shareUrl}&title=${title}`)
}

onMounted(() => {
  if (visible.value && props.imageUrl) {
    generateQRCode()
  }
})
</script>

<style scoped>
.share-content {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.preview-image {
  flex-shrink: 0;
}

.share-options {
  flex-grow: 1;
}

.share-options h4 {
  margin: 0 0 10px;
  color: var(--el-text-color-primary);
}

.share-buttons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.qrcode-container {
  margin-top: 20px;
  text-align: center;
}

.qrcode-container canvas {
  max-width: 100%;
  height: auto;
}

.dialog-footer {
  text-align: right;
}
</style> 